<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>model</title>
    <style>

        .bord{
            border: 1px dashed #ee2602;
            width: 90%;
            margin: 20px auto;
        }
        .titlea{
            font-size: 20px;
            font-weight: bold;
            margin: 20px;
        }
        .introduce{
            font-size: 16px;
            margin: 0 0 20px 50px;
        }
        .red{
            color: red;
        }
          * {padding:0;margin:0;font-size:14px}
        img {border:0 none}
        button {height:26px;padding:5px}

        /*标题栏*/
        .title {
            height:30px;
            line-height:30px;
            border-bottom:1px solid #efefef;
            background-color: rgb(79, 46, 255);
            font-weight:bold
        }

        /*查询栏*/
        .qry {
            height:35px;
            line-height:35px;
            border-bottom:1px solid #efefef;
            background-color: rgba(195, 200, 252, 0.84);
        }

        /*按钮兰*/
        .bar {
            height:26px;
            line-height:26px
        }

        /*数据栏*/
        .data {

        }

        .data table {
            width:100%;
            border:1px solid #efefef;
            border-collapse:collapse;
        }

        .data .page {
            height:30px;
            background-color: rgba(195, 200, 252, 0.84);
            text-align:center
        }
        tr{
            text-align: center;
        }
    </style>
    <script>
        function createDom(tagName,id){
            var dom = document.createElement(tagName);
            if(id){
                dom.id = id;
            }
            return dom
        }
        var commodity = [
            [ '手机', 1100, 'xx1.jpg'],
            [ '手机', 1100, 'xx1.jpg'],
            [ '手机', 1100, 'xx1.jpg'],
            [ '手机', 1100, 'xx1.jpg'],
            [ '电脑', 1200, 'xx1.jpg'],
            [ '电脑', 1200, 'xx1.jpg'],
            [ '电脑', 1200, 'xx1.jpg'],
            [ '电脑', 2100, 'xx1.jpg'],
            [ 'MP3', 300, 'xx1.jpg'],
            [ 'MP3', 300, 'xx1.jpg'],
            [ 'MP3', 300, 'xx1.jpg'],
            [ 'MP3', 300, 'xx1.jpg'],
            [ 'MP3', 300, 'xx1.jpg'],
            [ 'MP3', 300, 'xx1.jpg'],
            [ 'MP3', 300, 'xx1.jpg'],
            [ 'MP3', 300, 'xx1.jpg'],
            [ 'MP3', 300, 'xx1.jpg'],
            [ 'MP3', 300, 'xx1.jpg'],
            [ 'MP3', 300, 'xx1.jpg'],
            [ 'MP3', 300, 'xx1.jpg'],
            [ '打印机', 400, 'xx1.jpg']
        ];

        function render() {
            document.getElementById("cateGrid").innerHTML = '';
            for (var i =0 ;i < commodity.length;i++){
                var tr =createDom('tr');

                var dity = commodity[i];
                //复选框
                var td = createDom('td');
                td.innerHTML ='<input id="cba" name="selected" type="checkbox">';
                tr.appendChild( td );

                //序号
                var td = createDom('td');
                td.innerHTML =i + 1;
                tr.appendChild( td );

                for (var j = 0;j <dity.length;j++){
                    var td = createDom('td');
                    td.innerHTML = dity[j];
                    tr.appendChild( td );
                }
                document.getElementById("cateGrid").appendChild(tr);
            }
        }

        window.onload = function() {
            render();
            //全选
            document.getElementById("chkAll").onclick = function () {
                var checklist = document.getElementsByName ("selected");
                if(document.getElementById("chkAll").checked)
                {
                    for(var i=0;i<checklist.length;i++)
                    {
                        checklist[i].checked = 1;
                    }
                }else{
                    for(var j=0;j<checklist.length;j++)
                    {
                        checklist[j].checked = 0;
                    }
                }
            };

            //新增按钮
            document.getElementById('add').onclick = function () {
                document.getElementById('addcd').style.display = "block";
                document.getElementById('t1').value = commodity.length+1;
            };
            //新建里取消按钮
            document.getElementById('cancel').onclick = function () {
                document.getElementById('addcd').style.display = "none";
            };
            //新建里保存按钮
            document.getElementById("save").onclick = function () {
                            var snum = document.getElementById("t1").value;
                            var fname = document.getElementById("t2").value;
                            var price = document.getElementById("t3").value;
                            var ps = document.getElementById("t4").value;
                            var arr = [];
                            arr.push(fname);
                            arr.push(price);
                            arr.push(ps);
                            commodity.push(arr);
                document.getElementById('addcd').style.display = "none";
                render();

            };
            //修改按钮
            document.getElementById('rvs').onclick = function () {
                document.getElementById('revise').style.display = "block";
                document.getElementById('t1a').value = commodity.length+1;
                document.getElementById('t2a').value = commodity[i,1];
                document.getElementById('t3a').value = commodity.length+1;
                document.getElementById('t4a').value = commodity.length+1;
            };
            //修改里取消按钮
            document.getElementById('cancela').onclick = function () {
                document.getElementById('revise').style.display = "none";
            };
            //删除
            document.getElementById('del').onclick = function () {
                var doms=document.getElementById('cbs');
                var i = 0;
                for (i;i<doms.length;i++){
                    if(checkbox.checked==false) //如果表单1的复选框没被选中。则执行以下语句
                    {
                        alert("你还没有选中！");
                        return false;
                    }else {
                        commodity.slice(i,1);
                        render();
                    }
                 }
            };
        };
    </script>
</head>
<body>
<div class="bord">
    <div class="titlea">实作页面：分页表格的查询、新增、修改、删除功能</div>
    <div class="introduce">
        PS: 1.参考http://www.zpido.com/demo.html<br/>
        2.剽窃也好山寨也好，复制同等功能页面 (不要求样式，但尽量美观)<br/>
        3.自主代码实现<br/>
        4.借助开发者工具 可参考节点结构<br/>
    </div>
</div>
<div class="bord">
    <div class="titlea">演示效果</div>
    <div class="introduce">
        <div class = 'title'>商品分类管理</div>
        <div class = 'qry'>
            分类名称 : <input type = 'text' />
            <button>查询</button>
        </div>
        <div class = 'data'>
            <div class = 'bar'>
                <button id="add">新增</button>
                <button id="rvs">修改</button>
                <button id="del">删除</button>
            </div>
            <table  border = 1>
                <thead>
                <tr>
                    <th style = 'width:10%'><input id = "chkAll" name="chkAll" type="checkbox"></th>
                    <th style = 'width:10%'>序号</th>
                    <th style = 'width:40%'>商品名称</th>
                    <th style = 'width:10%'>价格</th>
                    <th style = 'width:30%'>备注</th>
                </tr>
                </thead>
                <tbody id = 'cateGrid'></tbody>
            </table>
            <div class = 'page'>
                <button id = 'btnHome'>首页</button>
                <button id = 'btnPrev'>上页</button>
                &nbsp;第<span id = 'spaNum'></span>页 / 一共有<span id = 'spaAll'></span>页&nbsp;
                <button id = 'btnNext'>下页</button>
                <button id = 'btnLast'>末页</button>
                每页<select id = 'selPageNum'><option value = 5>5</option><option value = 10>10</option><option value = 20>20</option></select>笔
            </div>
        </div>
        <div id="addcd" style="width: 300px;height: 190px;background-color: #faf4ff;position:fixed;top:35%;left: 35%;display: none">
            <div style="font-size: 18px">添加商品</div>
            <div style="font-size: 16px">
                <div style="margin: 10px 20px">序号：<input readonly type="text" id="t1"></div>
                <div style="margin: 10px 20px">商品名称：<input type="text" id="t2"></div>
                <div style="margin: 10px 20px">价格：<input type="number" id="t3"></div>
                <div style="margin: 10px 20px">备注：<input type="text" id="t4"></div>
                <div>
                    <button id="save" style="margin: 0  20px 0 90px">保存</button>
                    <button id="cancel">取消</button>
                </div>
            </div>
        </div>
        <div id="revise" style="width: 300px;height: 190px;background-color: #faf4ff;position:fixed;top:35%;left: 35%;display: none">
            <div style="font-size: 18px">修改商品</div>
            <div style="font-size: 16px">
                <div style="margin: 10px 20px">序号：<input readonly type="text" id="t1a"></div>
                <div style="margin: 10px 20px">商品名称：<input type="text" id="t2a"></div>
                <div style="margin: 10px 20px">价格：<input type="number" id="t3a"></div>
                <div style="margin: 10px 20px">备注：<input type="text" id="t4a"></div>
                <div>
                    <button id="savea" style="margin: 0  20px 0 90px">修改</button>
                    <button id="cancela">取消</button>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="bord">
    <div class="titlea">代码</div>
    <div class="introduce">介绍内容</div>
</div>
</body>
</html>